<template>
  <div class="shouye">
    <div class="index1">
      <div class="sousuo">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          style="width: 100%; display: flex; height: 56px"
        >
          <el-form-item style="width: 90%; margin-bottom: 0; cursor: pointer">
            <el-input
              v-model="formInline.user"
              placeholder="输入关键词搜索"
              style="width: 100%"
            >
              <img
                @click="onSubmit"
                slot="append"
                src="../../assets/images/sousuo.png"
                alt=""
              />
            </el-input>
            <!-- <el-input placeholder="输入关键词搜索" v-model="formInline.user" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="sousuos()"></el-button>
            </el-input> -->
          </el-form-item>
          <el-form-item style="width: 10%">
            <el-button type="primary" @click="retrieval()">高级搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="ria">
          <!-- <el-checkbox-group v-model="type" text-color="pink">
            <el-checkbox label="普查文献" name="type"></el-checkbox>
            <el-checkbox label="申报文献" name="type"></el-checkbox>
            <el-checkbox label="历史文献" name="type"></el-checkbox>
          </el-checkbox-group> -->
          <el-tree
            :data="data2"
            show-checkbox
            node-key="id"
            :props="defaultProps"
          >
          </el-tree>
        </div>
      </div>
      <div class="nr">
        <div class="nr1">
          <div class="nrs1">报刊类</div>
          <div class="nrs2">
            <div class="nrs3">非遇杂志</div>
            <div class="nrs3">非遗报纸</div>
            <div class="nrs3">非遗简报</div>
            <div class="nrs3">非遗重要报道报纸归集</div>
          </div>
          <div class="nrs1">历史文献</div>
          <div class="nrs2">
            <div class="nrs3">地方县志</div>
            <div class="nrs3">非遗相关古籍</div>
            <div class="nrs3">其他历史文献</div>
            <div class="nrs3">历史档案文献</div>
          </div>
          <div class="nrs1">人文文献</div>
          <div class="nrs2">
            <div class="nrs3">个人画册</div>
            <div class="nrs3">个人专善</div>
            <div class="nrs3">个人传记</div>
            <div class="nrs3">个人日记</div>
            <div class="nrs3">个人书信</div>
          </div>
        </div>
        <div class="nr2">
          <div class="nrs1">非遗档案文献</div>
          <div class="dangan">
            <div class="title">普查文献</div>
            <div class="dangan1">
              <div class="nrs3">普查文件</div>
              <div class="nrs3">普查任务书</div>
              <div class="nrs3">普查员</div>
              <div class="nrs3">普查机构</div>
              <div class="nrs3">工作影像</div>
              <div class="nrs3">项目调查</div>
              <div class="nrs3">普查总结</div>
              <div class="nrs3">普查大事记</div>
              <div class="nrs3">普查统计</div>
              <div class="nrs3">普查线索</div>
            </div>
            <div class="title">申报文献</div>
            <div class="dangan1">
              <div class="nrs3">非遇项目申报书</div>
              <div class="nrs3">非遗传承人申报书</div>
              <div class="nrs3">非遇基地申报书</div>
              <div class="nrs3">传统工艺工作站申报书</div>
              <div class="nrs3">非遇工坊申报书</div>
            </div>
            <div class="title">工作文献</div>
            <div class="dangan1">
              <div class="nrs3">政策法规档案</div>
              <div class="nrs3">实物档案</div>
              <div class="nrs3">资料档案</div>
              <div class="nrs3">活动档案</div>
              <div class="nrs3">经费档案</div>
              <div class="nrs3">保护单位档案</div>
              <div class="nrs3">普查总结</div>
              <div class="nrs3">人力资源档案</div>
              <div class="nrs3">会议档案</div>
            </div>
          </div>
          <div class="nrs1">图书类</div>
          <div class="nrs2">
            <div class="nrs3">政策法规</div>
            <div class="nrs3">项目宣传</div>
            <div class="nrs3">人物传记</div>
            <div class="nrs3">校本教材</div>
            <div class="nrs3">知识普及</div>
            <div class="nrs3">非遗从书</div>
            <div class="nrs3">研究善作</div>
            <div class="nrs3">作品集</div>
            <div class="nrs3">非遗画册</div>
            <div class="nrs3">非遗连环画</div>
            <div class="nrs3">论文集</div>
            <div class="nrs3">其他图书</div>
          </div>
        </div>
        <div class="nr3">
          <div class="nrs1">音像资料</div>
          <div class="dangan">
            <div class="title">视频类</div>
            <div class="dangan1">
              <div class="nrs3">非遗项目申报、宣传视频</div>
              <div class="nrs3">非遗活动视频</div>
              <div class="nrs3">非遗传承人申报、宣传视频</div>
              <div class="nrs3">非遗电影</div>
              <div class="nrs3">纪录片</div>
              <div class="nrs3">记录工程</div>
              <div class="nrs3">历史影像资料</div>
              <div class="nrs3">其他音像文献</div>
            </div>
            <div class="title">音频类</div>
            <div class="dangan1">
              <div class="nrs3">传统音乐类音频</div>
              <div class="nrs3">民间文学类音频</div>
              <div class="nrs3">采访类音频</div>
              <div class="nrs3">其他音频</div>
            </div>
          </div>
          <div class="nrs1">活动文献</div>
          <div class="nrs2">
            <div class="nrs3">非遗演活动照片</div>
            <div class="nrs3">节目单</div>
            <div class="nrs3">宣传册</div>
            <div class="nrs3">会议指南</div>
            <div class="nrs3">出席证</div>
            <div class="nrs3">嘉宾证</div>
            <div class="nrs3">媒体报道</div>
            <div class="nrs3">其他资料</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped  lang="scss">
::v-deep .el-tree-node__content:hover {
  background-color: transparent;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: transparent;
}
::v-deep .el-tree-node__label{
  padding-right: 20px;
  color: #3d3d3d !important;
}
::v-deep .el-tree-node__content>.el-tree-node__expand-icon {
    padding-right: 4px;
    display: none;
}
::v-deep .el-tree {
  display: flex;
  background:none;
  width: 870px;
}
::v-deep .el-checkbox {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #3d3d3d !important;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #3d3d3d !important;
}
::v-deep .el-checkbox__input.is-fcous .el-checkbox__inner {
  border-color: #911f23 !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #911f23;
  border-color: #911f23;
}
::v-deep .el-form-item {
  width: 80%;
}
::v-deep .el-form-item__content {
  width: 100%;
}
::v-deep .el-button--primary {
  background-color: #911f23;
  border-color: #911f23;
  border-radius: 8px;
  height: 50px;
}
::v-deep .el-input__inner {
  border: 1px solid #fff;
  height: 50px;
  padding-left: 20px;
}

::v-deep .el-input-group__append {
  border: none !important;
  background-color: #fff;
  padding: 0 45px 0 10px;
}
::v-deep .el-input-group__append img {
  width: 32px;
  height: 32px;
  padding-top: 10px;
  cursor: pointer;
}
::v-deep .el-input__icon {
  height: 100%;
  width: 10px;
  text-align: center;
  transition: all 0.3s;
  line-height: 50px;
  color: #911f23;
  // display: none;
}
::v-deep [class^="el-icon-"] {
  font-size: 20px;
}

::v-deep .el-radio {
  .el-radio__input {
    .el-radio__inner {
      border-radius: 2px;
      // height: 16px;
      // width: 16px;
    }
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    content: "";
    width: 8px;
    height: 3px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 2px;
    left: 1px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }
}
::v-deep .el-radio__label {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #3d3d3d !important;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #911f23 !important;
  background: #911f23 !important;
}
::v-deep .el-radio__inner {
  &:hover {
    border-color: #911f23;
  }
}
.shouye {
  width: 1400px;
  margin: 0 auto;
  margin-top: -210px;
  margin-bottom: 60px;
  .index1 {
    width: 100%;
    .sousuo {
      position: relative;
      width: 870px;
      margin: 0 auto;
      .ria {
        position: absolute;
        top: 50px;
        width: 100%;
        display: flex;
        margin-top: 14px;
        z-index: 1000;
        // float: left;
      }
    }
    .nr {
      width: 100%;
      margin-top: 80px;
      display: flex;
      justify-content: space-between;

      .nr1 {
        width: 356px;
        background-color: #fff;
        padding-bottom: 20px;
        z-index: 1 !important;
        .nrs1 {
          width: calc(100% - 40px);
          height: 73px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #d8d8d8;
          padding-left: 40px;
          font-size: 18px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #911f23;
        }
        .nrs2 {
          width: calc(100% - 80px);
          padding: 15px 40px 0;
          font-size: 14px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          line-height: 40px;
        }
      }
      .nr2 {
        width: 655px;
        background-color: #fff;
        padding-bottom: 20px;
        z-index: 1 !important;
        .dangan {
          width: calc(100% - 80px);
          padding: 5px 40px 0;
          .title {
            width: 100%;
            font-size: 14px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            margin-top: 20px;
          }
          .dangan1 {
            width: calc(100% - 00px);
            padding: 5px 0px 0;
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            display: flex;
            color: #999999;
            flex-wrap: wrap;

            line-height: 35px;
            .nrs3 {
              margin-right: 15px;
              min-width: 40px;
            }
          }
        }
        .nrs1 {
          width: calc(100% - 40px);
          height: 73px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #d8d8d8;
          padding-left: 40px;
          font-size: 18px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #911f23;
        }
        .nrs2 {
          width: calc(100% - 80px);
          padding: 15px 40px 0;
          font-size: 14px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          line-height: 40px;
          .nrs3 {
            margin-right: 10px;
          }
        }
        .nrs2:after {
          content: "";
          min-width: 210px;
        }
      }
      .nr3 {
        width: 356px;
        background-color: #fff;
        padding-bottom: 20px;
        z-index: 1 !important;
        .dangan {
          width: calc(100% - 70px);
          padding: 5px 30px 0 40px;
          .title {
            width: 100%;
            font-size: 14px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            margin-top: 20px;
          }
          .dangan1 {
            width: calc(100% - 00px);
            padding: 5px 0px 0;
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            display: flex;
            color: #999999;
            flex-wrap: wrap;

            line-height: 35px;
            .nrs3 {
              margin-right: 15px;
              min-width: 40px;
            }
          }
        }
        .nrs1 {
          width: calc(100% - 40px);
          height: 73px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #d8d8d8;
          padding-left: 40px;
          font-size: 18px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #911f23;
        }
        .nrs2 {
          width: calc(100% - 80px);
          padding: 15px 40px 0;
          font-size: 14px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          line-height: 40px;
        }
        .nrs2:after {
          content: "";
          min-width: 30px;
        }
      }
    }
  }
}
</style>

<script>
import { getjiedian1 } from "@/api/api.js";

export default {
  data() {
    return {
      type: [],
      formInline: {
        user: "",
        radio: "1",
      },

      data2: [],
      defaultProps: {
        children: "children",
        label: "mc",
      },
    };
  },
  created() {},
  mounted() {
    // this.drawChart()
    this.getjiedian();
  },
  methods: {
    async getjiedian() {
      let res = await getjiedian1();
      if (res.code == 200) {
        this.data2 = res.data[1].children;
      }
    },

    sousuos() {
      if (this.formInline.user == "") {
        this.$message.error({ message: "请输入搜索内容!", center: true });
      };
    },
    onSubmit() {
      sessionStorage.setItem("erjsnav", 0);
      this.$router.push("/s1");
    },
    retrieval() {
      sessionStorage.setItem("erjsnav", 0);
      this.$router.push("/retrieval");
    },
  },
  computed: {},
  components: {},
};
</script>
